<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
		<title>Psychology Manage System</title>


		<!-- Favicon -->
		<link rel="shortcut icon" href="assets/img/favicon.png">
		<link rel="stylesheet" href="assets/css/element.css">
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="assets/css/bootstrap.min.css">

		<!-- Fontawesome CSS -->
		<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
		<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">

		<!-- Main CSS -->
		<link rel="stylesheet" href="assets/css/style.css">



		<script src="assets/js/vue.js"></script>

		<script src="assets/js/axios.js"></script>
		<script src="assets/js/qs.js"></script>
		<script src="assets/util/localStorageUtil.js"></script>

		<script src="assets/js/element.js"></script>
		<script src="assets/util/common.js"></script>


		<!--[if lt IE 9]>
			<script src="assets/js/html5shiv.min.js"></script>
			<script src="assets/js/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>

		<!-- Main Wrapper -->
		<div class="main-wrapper" id="app">

			<!-- Header -->
			<div class="header">

				<!-- Logo -->
				<div class="header-left">
					<a href="profile.html" class="logo">
						<img src="assets/img/logo.png" alt="Logo">
					</a>
					<a href="profile.html" class="logo logo-small">
						<img src="assets/img/logo-small.png" alt="Logo" width="30" height="30">
					</a>
				</div>
				<!-- /Logo -->

				<!-- Sidebar Toggle -->
				<a href="javascript:void(0);" id="toggle_btn">
					<i class="fas fa-bars"></i>
				</a>
				<!-- /Sidebar Toggle -->

				<!-- Mobile Menu Toggle -->
				<a class="mobile_btn" id="mobile_btn">
					<i class="fas fa-bars"></i>
				</a>
				<!-- /Mobile Menu Toggle -->

				<!-- Header Menu -->
				<ul class="nav user-menu">

					<!-- Flag -->
					<li class="nav-item dropdown has-arrow flag-nav">
						<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">
							<img src="assets/img/flags/zh.png" alt="" height="20"> <span>简体中文</span>
						</a>
						<div class="dropdown-menu dropdown-menu-right">
							<a href="javascript:void(0);" class="dropdown-item">
								<img src="assets/img/flags/zh.png" alt="" height="16"> 简体中文
							</a>
						</div>
					</li>
					<!-- /Flag -->

					<!-- User Menu -->
					<li class="nav-item dropdown has-arrow main-drop">
						<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
							<span class="user-img">
								<img :src="userinfo.figureUrl==='' ? 'assets/img/logo-small.png': userinfo.figureUrl " alt="">
								<span class="status online"></span>
							</span>
							<span v-html="userinfo.nickname"></span>
						</a>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="profile.html"><i data-feather="user" class="mr-1"></i> 个人中心</a>
							<button class="dropdown-item" onclick="logout()"><i data-feather="log-out" class="mr-1"></i> 注销</button>
						</div>
					</li>
					<!-- /User Menu -->

				</ul>
				<!-- /Header Menu -->

			</div>
			<!-- /Header -->

			<!-- Sidebar -->
			<div class="sidebar" id="sidebar">
				<div class="sidebar-inner slimscroll">
					<div id="sidebar-menu" class="sidebar-menu" >
						<ul id="sidebarMenu">
						</ul>
					</div>
				</div>
			</div>
			<!-- /Sidebar -->

			<!-- Page Wrapper -->
			<div class="page-wrapper">
				<div class="content container-fluid">

					<div class="row">
						<div class="col-xl-3 col-sm-6 col-12">
							<div class="card">
								<div class="card-body">
									<div class="dash-widget-header">
										<span class="dash-widget-icon bg-2">
											<i class="fas fa-users"></i>
										</span>
										<div class="dash-count">
											<div class="dash-title">人际</div>
											<div class="dash-counts">
												<p>{{display.interpersonal.total}}</p>
											</div>
										</div>
									</div>
									<div class="progress progress-sm mt-3">
										<div class="progress-bar bg-5" role="progressbar" :style="{width: display.interpersonal.totalRate}" :aria-valuenow="display.interpersonal.totalRate" aria-valuemin="0" aria-valuemax="100"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xl-3 col-sm-6 col-12">
							<div class="card">
								<div class="card-body">
									<div class="dash-widget-header">
										<span class="dash-widget-icon bg-2">
											<i class="fas fa-users"></i>
										</span>
										<div class="dash-count">
											<div class="dash-title">学习</div>
											<div class="dash-counts">
												<p>{{display.study.total}}</p>
											</div>
										</div>
									</div>
									<div class="progress progress-sm mt-3">
										<div class="progress-bar bg-6" role="progressbar" :style="{width: display.study.totalRate}" :aria-valuenow="display.study.totalRate" aria-valuemin="0" aria-valuemax="100"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xl-3 col-sm-6 col-12">
							<div class="card">
								<div class="card-body">
									<div class="dash-widget-header">
										<span class="dash-widget-icon bg-2">
											<i class="fas fa-users"></i>
										</span>
										<div class="dash-count">
											<div class="dash-title">就业</div>
											<div class="dash-counts">
												<p>{{display.employ.total}}</p>
											</div>
										</div>
									</div>
									<div class="progress progress-sm mt-3">
										<div class="progress-bar bg-7" role="progressbar" :style="{width: display.employ.totalRate}" :aria-valuenow="display.employ.totalRate" aria-valuemin="0" aria-valuemax="100"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xl-3 col-sm-6 col-12">
							<div class="card">
								<div class="card-body">
									<div class="dash-widget-header">
										<span class="dash-widget-icon bg-2">
											<i class="fas fa-users"></i>
										</span>
										<div class="dash-count">
											<div class="dash-title">情感</div>
											<div class="dash-counts">
												<p>{{display.emotion.total}}</p>
											</div>
										</div>
									</div>
									<div class="progress progress-sm mt-3">
										<div class="progress-bar bg-8" role="progressbar" :style="{width: display.emotion.totalRate}" :aria-valuenow="display.emotion.totalRate" aria-valuemin="0" aria-valuemax="100"></div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-xl-7 d-flex">
							<div class="card flex-fill">
								<div class="card-header">
									<div class="d-flex justify-content-between align-items-center">
										<h5 class="card-title">心理测试记录柱图分析</h5>
										<div class="dropdown" data-toggle="dropdown">
											<a href="javascript:void(0);" class="btn btn-white btn-sm dropdown-toggle" role="button" data-toggle="dropdown">
												Monthly
											</a>
											<div class="dropdown-menu dropdown-menu-right">
												<a href="javascript:void(0);" class="dropdown-item">Weekly</a>
												<a href="javascript:void(0);" class="dropdown-item">Monthly</a>
												<a href="javascript:void(0);" class="dropdown-item">Yearly</a>
											</div>
										</div>
									</div>
								</div>
								<div class="card-body">
									<div class="d-flex align-items-center justify-content-between flex-wrap flex-md-nowrap">
										<div class="w-md-100 d-flex align-items-center mb-3">
											<div>
												<span>总人数</span>
												<p class="h3 text-primary mr-5">{{display.totalCount}}</p>
											</div>
										</div>
									</div>

									<div id="sales_chart"></div>
								</div>
							</div>
						</div>
						<div class="col-xl-5 d-flex">
							<div class="card flex-fill">
								<div class="card-header">
									<div class="d-flex justify-content-between align-items-center">
										<h5 class="card-title">心理测试记录饼图分析</h5>
										<div class="dropdown" data-toggle="dropdown">
											<a href="javascript:void(0);" class="btn btn-white btn-sm dropdown-toggle" role="button" data-toggle="dropdown">
												Monthly
											</a>
											<div class="dropdown-menu dropdown-menu-right">
												<a href="javascript:void(0);" class="dropdown-item">Weekly</a>
												<a href="javascript:void(0);" class="dropdown-item">Monthly</a>
												<a href="javascript:void(0);" class="dropdown-item">Yearly</a>
											</div>
										</div>
									</div>
								</div>
								<div class="card-body">
									<div id="invoice_chart"></div>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
			<!-- /Page Wrapper -->
		</div>

		<!-- /Main Wrapper -->

		<!-- jQuery -->
		<script src="assets/js/jquery-3.5.1.min.js"></script>

		<!-- Bootstrap Core JS -->
		<script src="assets/js/popper.min.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>

		<!-- Feather Icon JS -->
		<script src="assets/js/feather.min.js"></script>

		<!-- Slimscroll JS -->
		<script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>

		<!-- Chart JS -->
		<script src="assets/plugins/apexchart/apexcharts.min.js"></script>
		<script src="assets/plugins/apexchart/chart-data.js"></script>

		<!-- Custom JS -->
		<script src="assets/js/script.js"></script>
		<script src="assets/util/request.js"></script>

	</body>
<script>
	let storage = new Storage();
	var index = new Vue({
		el: '#app',
		data() {
			return {
				userinfo: '',
				display:{
					totalCount: null,
					interpersonal: '',
					study: '',
					employ: '',
					emotion: '',
				},
				activePage: '/index.html'
			}
		},
		methods:{
			getUserInfo() {
				//设置用户信息
				if(storage.getItem("userinfo")!=null){
					this.userinfo = storage.getItem("userinfo");
					initMenu(storage.getItem("routeMap"),this.activePage)
				}else{
					service.get("/user/getUserInfo").then(res=>{
						storage.setItem({
							name: "userinfo",
							value: res.data.userinfo
						})
						storage.setItem({
							name: "routeMap",
							value: res.data.routeMap
						})
						initMenu(res.data.routeMap,this.activePage)
						this.userinfo = res.data.userinfo;
					});
				}
			},
			getDashboardInfo(){
				service.get("/dashboard/display").then(res=>{
					this.display.interpersonal = res.data.interpersonal;
					this.display.study = res.data.study;
					this.display.employ = res.data.employ;
					this.display.emotion = res.data.emotion;
					this.display.totalCount = res.data.totalCount;
				})
			}
		},
		mounted() {
			this.getDashboardInfo();
			intThisPoint(this);
			this.getUserInfo();
		},
	})

</script>
</html>
